<script setup lang="ts">
import { ref,onMounted } from 'vue';
import DataSourceConfig from './DataSourceConfig.vue';
import type {DataSourceModel} from './DataSourceConfig.vue'
import Metadata from './Metadata.vue';
import TemplateConfig from './TemplateConfig.vue';
import {sendAndRequest} from '@/utils/SocketDUtil.js'
const current = ref(1)

const onPrev = ()=>{
  current.value = Math.max(1, current.value - 1)
}
const onNext = ()=>{
  current.value = Math.max(1, current.value + 1)
}

const dataSourceModel = ref<DataSourceModel>({
  url: '',
  username: '',
  password: '',
  type: ''
})

const exitVisible = ref(false)
const exitHandleOk = ()=>{
  sendAndRequest('/app/exit',{}).thenReply(reply=>{
              console.log('reply',reply,reply.dataAsString())
              window.opener=null
              window.location.replace('about:blank')
              window.close();
      })
}
onMounted(()=>{
  document.title="DataPump"
})

</script>

<template>
  <div className="layout-basic-demo">
    <a-layout style="height: 400px">
      <a-layout-header>
        <a-steps label-placement="vertical" :current="current">
          <a-step description="配置&连接数据库">数据源</a-step>
          <a-step description="数据源->元数据">元数据</a-step>
          <a-step description="元数据->模版">配置模版</a-step>
          <a-button type="primary" status="danger" @click="exitVisible = true"
            >退出</a-button
          >
        </a-steps>
      </a-layout-header>
      <a-layout>
        <a-layout-content>
          <DataSourceConfig v-model="dataSourceModel" v-show="current === 1" />
          <Metadata v-show="current === 2" />
          <TemplateConfig v-show="current === 3" />
        </a-layout-content>
      </a-layout>
      <a-layout-footer class="main-view-footer">
        <a-space size="large">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft /> Back
          </a-button>
          <a-button type="primary" :disabled="current >= 3" @click="onNext">
            Next <IconRight />
          </a-button>
        </a-space>
      </a-layout-footer>
    </a-layout>

    <a-modal
      v-model:visible="exitVisible"
      @ok="exitHandleOk"
      @cancel="exitVisible = false"
    >
      <template #title> 退出警告 </template>
      <div>此操作会关闭程序，确定要退出吗？</div>
    </a-modal>
  </div>
</template>

<style scoped>
.border {
  border: solid 1px white;
  padding: 20px 0;
}
.main-view-footer {
  display: flex;
  justify-content: center;
}
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  background-color: var(--color-primary-light-4);
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
  background-color: var(--color-primary-light-3);
}

.layout-demo :deep(.arco-layout-content) {
  background-color: rgb(var(--arcoblue-6));
}
</style>